<template>
  <div class='instance'>
    <video id='my-video'  class="video-js vjs-default-skin vjs-big-play-centered"/>
  </div>
</template>

<script>
  export default {

    mounted() {
      this.videoLive()
    },

    data() {
      return {
        // 要进行播放的rtmp地址
        //nowPlayVideoUrl: 'rtmp://58.200.131.2:1935/livetv/cctv1'
        nowPlayVideoUrl: 'rtmp://192.168.44.136/live/'

      }
    },

    methods: {
      // 初始化播放器方法
      initVideoPlayer() {
        // 第一个选中的要播放的video标签, 记得是video标签,
        const currentInstance = this.$video(('my-video'), {
          autoplay: true, // 是否自动播放
          controls: true, // 是否显示控件
        })

        currentInstance.src({
          src: this.nowPlayVideoUrl,
          type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频
        })
      },

      videoLive(val) {
        setTimeout(
          this.initVideoPlayer(val)
          , 300)

      },
    }
  }
</script>

<style>
  #video {
    width: 300px;
    height: 500px
  }

</style>
